<template>
    <el-row style="height:100%;width:100%" type="flex">
        <div style="width:150px;min-width:150px;height:100%;border-right:1px solid #e0e0e0;background-color: #081832;">
            <ul>
                <li v-for="(item,index) in menus" :key="index" :class="{'active':activeIndex == index}" @click="doRouter(item,index)">
                    <span class="go-back">{{item.name}}</span>
                </li>
            </ul>
        </div>
        <router-view style="width:calc(100vw - 150px)"/>
    </el-row>
</template>

<script>
export default {
    name: 'index',
    data() {
        return {
            activeIndex: 1,
            menus:[{
                path:'/alarm/rfid',
                name:'RFID告警记录'
            },{
                path:'/alarm/camera',
                name:'摄像头告警记录'
            },{
                path:'/alarm/alarm',
                name:'充电告警记录'
            }],
        }
    },
    methods: {
        doRouter(item, index) {
            this.activeIndex = index
            this.$router.push({ path: item.path })
        }
    },
    mounted() {
        this.doRouter({path:'/alarm/rfid'},0)
    }
}
</script>
<style scoped>
li {
    padding: 10px;
    cursor: pointer;
    background-color: #081832;
    color: #fff;
}
li:hover {
    opacity: 0.6;
    background-color: #034c6a;
}
.active {
    box-shadow: inset -10px 0 15px #034c6a, inset 0 -10px 15px #034c6a, inset 10px 0 15px #034c6a, inset 0 10px 15px #034c6a;
}
</style>